﻿
<style>
    /**头部*/
    .layui-layout-admin .layui-header {
        background-color: #ffffff;
        color: #20222A;
    }

    .layui-layout-admin .layui-body {
        top: -10px;
        z-index: 9999;
    }

    .layui-layout-admin .layui-logo {
        background-color: #20222A !important;
        text-align:left;
    }

    /*将选项卡的大小固定住*/
    .layui-tab-content {
        position: absolute;
        bottom: 0px;
        top: 50px;
        left: 0px;
        right: 0px;
    }

    .layui-tab-item {
        height: 100%;
    }
    /**底部信息居中*/
    .layui-footer {
        text-align: center;
    }
</style>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            &nbsp;<img src="~/logo.png" height="30" width="30" />&nbsp;配置中心
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="">
                    <i class="layui-icon">&#xe60c;</i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black layui-side-menu">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item" data-type="tabAdd">
                    <a href="javascript:;" data-href="@Url.Action("Index","CollectInfoConfig")">
                        <i class="layui-icon layui-icon-component"></i>
                        <cite>采集配置</cite>
                    </a>
                </li>
                <li class="layui-nav-item" data-type="tabAdd">
                    <a href="javascript:;" data-href="@Url.Action("Index","ProxyIP")">
                        <i class="layui-icon layui-icon-release"></i>
                        <cite>代理配置</cite>
                    </a>
                </li>
                <li class="layui-nav-item" data-type="tabAdd">
                    <a href="javascript:;" data-href="@Url.Action("Index","TerminalConfig")">
                        <i class="layui-icon layui-icon-layer"></i>
                        <cite>终端配置</cite>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="nav" lay-allowclose="true">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © copy right
    </div>


</div>
@section Scripts{

    <script>

        layui.use('element', function () {
            var $ = layui.jquery
                , element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块
                , tabs = []
            //触发事件
            var active = {
                tabAdd: function (othis) {

                    var href = $('a', othis).attr('data-href');

                    if ($.inArray(href, tabs) < 0) {
                        //新增一个Tab项
                        element.tabAdd('nav', {
                            title: $(othis).text()
                            , content: '<iframe frameborder="0"  width="100%" height="100%" name="htmlcontainer" style="overflow:hidden;" src="' + href + '"></iframe>'
                            , id: href //实际使用一般是规定好的id，这里以时间戳模拟下
                        })
                        tabs.push(href);
                    }
                    //切换到指定Tab项
                    element.tabChange('nav', href);
                }
            };
            //导航点击
            $('.layui-nav-item').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //监听tab删除
            element.on('tabDelete(nav)', function (data) {
                //console.log(this); //当前Tab标题所在的原始DOM元素
                //console.log(data.index); //得到当前Tab的所在下标
                //console.log(data.elem); //得到当前的Tab大容器


                $('a[data-href="' + tabs[data.index] + '"]').parent().removeClass('layui-this');
                tabs.splice(data.index, 1);
            });
            //监听tab切换
            element.on('tab(nav)', function (data) {
                //console.log(this); //当前Tab标题所在的原始DOM元素
                //console.log(data.index); //得到当前Tab的所在下标
                //console.log(data.elem); //得到当前的Tab大容器

                //切换标签时更改左侧选中项
                $('.layui-nav-item').removeClass('layui-this');
                $('a[data-href="' + tabs[data.index] + '"]').parent().addClass('layui-this');
            });

        });
    </script>

}